<template>
  <ad-form v-bind="searchFormConfig" :inline="false"></ad-form>
</template>
<script lang="ts" setup>
import { noNumericToBlank } from "@fe-hl/utils";
import { reactive } from "vue";
// 快捷选择
const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
  {
    text: "一年内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      return [start, end];
    },
  },
];
// 直接范围一年内，不能过过当前时间
const disabledDate = (time: Date) => {
  const curDate = new Date().getTime();
  const three = 365 * 24 * 3600 * 1000;
  const threeMonths = curDate - three;
  return time.getTime() > Date.now() || time.getTime() < threeMonths;
};

// 搜索配置
const searchFormConfig = reactive<any>({
  handlerSubmit: (formModels: any) => {
    // 提交的数据
    console.log("formModels", formModels);
    return Promise.resolve();
  },
  formConfigList: [
    {
      componentType: "text",
      label: "手机号",
      type: "text",
      placeholder: "请输入手机号",
      key: "phone",
      maxlength: 11,
      rules: [{ required: true, message: "请输入手机号" }],
    },
    {
      componentType: "text",
      type: "text",
      label: "商户号",
      formatter: noNumericToBlank,
      placeholder: "请输入商户号",
      key: "mercId",
      rules: [{ required: true, message: "请输入商户号" }],
    },
    {
      componentType: "date",
      type: "daterange",
      dateFormat: "YYYY-MM-DD",
      label: "时间选择",
      placeholder: "选择时间选择",
      shortcuts: shortcuts,
      disabledDate: disabledDate,
      key: "dateRange",
      rules: [{ required: true, message: "选择时间选择" }],
    },
  ],
});
</script>
